<template>
    <div class="edit-box">
        <div class="cell">
            <el-descriptions class="margin-top" :column="2" border>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            左右边距
                        </div>
                    </template>
                    <el-input v-model="main.padding" type="text" placeholder="请输入" />
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            背景色
                        </div>
                    </template>
                    <el-color-picker v-model="main.bg_color" show-alpha />
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            文字颜色
                        </div>
                    </template>
                    <el-color-picker v-model="main.txt_color" show-alpha />
                </el-descriptions-item>
            </el-descriptions>
        </div>
        <div class="btn">
            <el-button type="primary" @click="addBannerImg">添加导航图标</el-button>
            <span class="tip" style="color: red;">图标宽高比1:1</span>
        </div>
        <div class="img-hox-box" v-if="main.list">
            <draggable :list="main.list" ghost-class="ghost" chosen-class="chosenClass" animation="300">
                <template #item="{ element, index }">
                    <div>
                        <el-card style="margin-top: 10px;">
                            <div class="img-hot-item">
                                <div class="img-hot-item_i">
                                    <el-upload class="upload-demo" :action="`${$imgUrl}/common/upload/pic`" :headers="{
                token: $pinia.state.value.store.token
            }" :on-success="(res) => handleSuccess(res, index)" :show-file-list="false" list-type="picture"
                                        :limit="10">
                                        <el-button type="primary">图片上传</el-button>
                                        <img :src="$imgUrl + element.img" v-if="element.img" alt=""
                                            style="width:60px;height: 60px;">
                                    </el-upload>
                                </div>

                                <el-descriptions class="margin-top" :column="2" border>
                                    <el-descriptions-item>
                                        <template #label>
                                            <div class="cell-item">
                                                名称
                                            </div>
                                        </template>
                                        <el-input v-model="element.name"></el-input>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template #label>
                                            <div class="cell-item">
                                                跳转链接
                                            </div>
                                        </template>
                                        <el-input v-model="element.url"></el-input>
                                    </el-descriptions-item>

                                </el-descriptions>

                                <el-icon class="del-btn" @click="delBannerItem(index)">
                                    <CircleClose />
                                </el-icon>
                            </div>
                        </el-card>
                    </div>
                </template>
            </draggable>
        </div>
    </div>
</template>

<script setup name="BannerEdit">
import draggable from 'vuedraggable'

const props = defineProps({
    info: {
        required: true,
        default: {
        }
    },
});

const data = reactive({
    main: {
        list: []
    }
})
const { main } = toRefs(data)
onMounted(() => {
    data.main = props.info
})


function addBannerImg() {
    data.main.list.push({
        link: '',
        click_type: 'link',
        img: '',
        name: ''
    })
}

function delBannerItem(index) {
    data.main.list.splice(index, 1)
}

function handleSuccess(res, index) {
    var img = ''
    if (res.code === 0) {
        img = res.data.url
    }
    data.main.list[index].img = img
}

</script>
<style lang="scss" scoped>
.edit-box {
    width: 100%;
    height: auto;
    padding: 20px;

    .btn {
        margin: 10px 0;
    }

    .img-hot-item {
        display: flex;
        align-items: center;
        position: relative;
    }

    .img-hot-item_i {
        display: flex;
        align-items: center;

        &>span {
            display: inline-block;
            min-width: 60px;
            margin-left: 10px;
        }
    }

    .del-btn {
        color: #f00;
        font-size: 20px;
        position: absolute;
        right: -10px;
        top: -10px;
        z-index: 3;
    }

}
</style>
